﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        /* 可以添加一些自定义样式 */
        .page-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        .txt_bg {
            background-color: #FFD553;
        }

        .tab1 tr td {
            border: 1px solid #000000;
            margin: 3px;
        }

        body {
            background-color: #FFFFCC;
        }
        .d2 {
            margin: 3px;
        }

        .d1 {
            margin: 0 auto;
            width: fit-content;
            margin-bottom: 15px;
        }

        .d2 {
            margin-bottom: 5px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>您正在做的业务是：人力资源--招聘管理--简历管理--简历筛选</div>
        
        <div class="d1">
            <div class="d2">
                <button v-on:click="sel">搜索</button>
            </div>
            <table class="tab1" border="1">
                <tr>
                    <td class="txt_bg">请选择职位分类</td>
                    <td>
                        <el-cascader v-model="selectedOrg"
                                     :options="orgOptions"
                                     :props="cascaderProps"
                                     placeholder="请选择职位分类"
                                     clearable
                                     v-on:change="handleOrgChange"
                                     class="w-full"
                                     style="width: 100%;">
                        </el-cascader>
                    </td>
                </tr>
                <tr>
                    <td class="txt_bg">请输入关键字</td>
                    <td><el-input v-model="Gjz"></el-input></td>
                </tr>
                <tr>
                    <td class="txt_bg">请输入登记时间</td>
                    <td>
                        <el-date-picker v-model="value1"
                                        type="datetimerange"
                                        start-placeholder="Start Date"
                                        end-placeholder="End Date"
                                        :default-time="defaultTime1" />
                    </td>
                </tr>
            </table>
        </div>

        <div calss="d3">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="human_name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="human_major_kind_name" label="职位分类名称" width="180"></el-table-column>
                <el-table-column prop="human_major_name" label="职位名称"></el-table-column>
                <el-table-column prop="human_mobilephone" label="手机号码"></el-table-column>
                <el-table-column prop="human_sex" label="性别"></el-table-column>
                <el-table-column prop="human_educated_major" label="学历专业"></el-table-column>
                <el-table-column prop="human_name" label="操作">
                    <template #default="scope">
                        <el-button size="small" type="primary" v-on:click="() => goToCk(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加分页组件 -->
            <div class="page-container">
                <el-pagination v-on:size-change="handleSizeChange"
                               v-on:current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[4, 8, 12, 20]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
    <script>
        const { createApp, ref, onMounted } = Vue;

        const app = createApp({
          setup() {

              const HumanMajorKindId = ref('');//职位分类编号
              const HumanMajorKindName = ref('');//职位分类名称
              const HumanMajorId = ref('');//职位编号
              const HunmaMajorName = ref('');//职位名称
              const Gjz = ref('')//关键字

              // 职位分类选择相关
              const selectedOrg = ref([]);
              const orgOptions = ref([]);

              const cascaderProps = ref({
                  expandTrigger: 'click',
                  value: 'id',
                  label: 'name',
                  children: 'children',
                  checkStrictly: false
              });

               // 获取职位
              const fetchOrgData = async () => {
                  try {
                      const response = await axios.get('/FirstLevelYxJlSelect');
                      orgOptions.value = response.data;
                      console.log(response.data);
                  } catch (error) {
                      console.error('获取机构数据失败:', error);
                      Message.error('获取机构数据失败，请重试');
                  }
              };
              const firstKindName = ref('');
              const secondKindName = ref('');
              // 处理级联选择变化
              const handleOrgChange = (value) => {
                  console.log('选中的职位ID:', value);

                  // 清空名称
                  firstKindName.value = '';
                  secondKindName.value = '';

                  const firstId = value[0];
                  const secondId = value[1];

                  // 获取I级名称
                  if (firstId) {
                      const firstItem = orgOptions.value.find(item => item.id === firstId);
                      firstKindName.value = firstItem?.name || '';
                      console.log("职位分类名称: " + firstKindName.value);
                  }

                  // 获取II级名称
                  if (firstId && secondId) {
                      const firstItem = orgOptions.value.find(item => item.id === firstId);
                      if (firstItem && firstItem.children) {
                          const secondItem = firstItem.children.find(item => item.id === secondId);
                          secondKindName.value = secondItem?.name || '';
                          console.log("职位名称: " + secondKindName.value);
                      }
                  }

                  HumanMajorKindId.value = value[0]//职位分类编号
                  HumanMajorKindName.value = firstKindName.value//职位分类名称
                  HumanMajorId.value = value[1]//职位编号
                  HunmaMajorName.value = secondKindName.value//职位名称
              };

              onMounted(() => {
                  fetchOrgData();
              });

              const value1 = ref('')
              const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0);

              const formattedStartDate = ref('');
              const formattedEndDate = ref('');

              // 格式化日期函数
              const formatDate = (date) => {
                if (!date) return '';
                const d = new Date(date);
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
              };

              function sel() {
                // 获取选择的时间范围
                const [startDate, endDate] = value1.value || [];

                // 格式化日期
                formattedStartDate.value = formatDate(startDate);
                formattedEndDate.value = formatDate(endDate);

                console.log('开始日期:', formattedStartDate.value);
                console.log('结束日期:', formattedEndDate.value);

                axios.get("/ER_YxSelect/SelectByYxTj_ER", {
                      params: {
                          CurrentPage: currentPage.value,
                          PageSize: pageSize.value,
                          id1:HumanMajorKindId.value,
                          id2:HumanMajorId.value,
                          Tj:Gjz.value,
                          ksTime:formattedStartDate.value,
                          jsTime:formattedEndDate.value
                      }
                  })
                  .then(res => {
                        tableData.value = res.data.list.itemas;
                        total.value = res.data.list.total; // 更新总记录数
                        console.log(tableData.value)
                  })
                  .catch(err => {
                      console.error("获取数据失败:", err);
                      // 可以添加错误提示
                      ElMessage.error("获取数据失败，请稍后重试");
                  });

              }

              const tableData = ref([]);
              const pageSize = ref(4);
              const currentPage = ref(1); // 初始页码应为1
              const total = ref(0); // 总记录数

              function fill() {
                  axios.get("/ER_YxSelect/SelectByYxTj_ER", {
                      params: {
                          CurrentPage: currentPage.value,
                          PageSize: pageSize.value,
                          id1:HumanMajorKindId.value,
                          id2:HumanMajorId.value,
                          Tj:Gjz.value,
                          ksTime:formattedStartDate.value,
                          jsTime:formattedEndDate.value
                      }
                  })
                  .then(res => {
                        tableData.value = res.data.list.itemas;
                        total.value = res.data.list.total; // 更新总记录数
                        console.log(tableData.value)
                  })
                  .catch(err => {
                      console.error("获取数据失败:", err);
                      // 可以添加错误提示
                      ElMessage.error("获取数据失败，请稍后重试");
                  });
              }

              // 页面大小变化时的处理函数
              function handleSizeChange(newSize) {
                  pageSize.value = newSize;
                  currentPage.value = 1; // 重置页码为1
                  fill();
              }

              // 当前页码变化时的处理函数
              function handleCurrentChange(newPage) {
                  currentPage.value = newPage;
                  fill();
              }

              // 初始加载数据
              onMounted(() => {
                  fill();
              });

              function goToCk(zhi){
                  window.location.href = `/ER_YxSelect/Select?id=${zhi.res_id}`;
              }

              

              return {
                  handleOrgChange,
                  fetchOrgData,
                  selectedOrg,
                  cascaderProps,
                  orgOptions,
                  value1,
                  defaultTime1,
                  formattedStartDate,
                  formattedEndDate,
                  sel,
                  Gjz,
                  tableData,
                  pageSize,
                  currentPage,
                  total,
                  handleSizeChange,
                  handleCurrentChange,
                  goToCk,
              }
          }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>